/* 清除浏览器默认设置 */
*{
	margin: 0;
	padding: 0;
}

/* 主体容器的样式设置开始 */
.main{
	
	width: 100vw;
	height: 100vh;
	background-image: url(../images/bj.png);
	background-size: 100% 100%;
	overflow:hidden;
}
/* 主体容器的样式设置结束 */

/* header样式布局开始 */
header{
	height:60px;
	color:#28a1be;
	font-size:25px;
	text-align:center;
	letter-spacing:5px;
	position:relative;
}

#div2{
	height:30px;
	width:180px;
	/* background-color:aqua; */
	color:#28a1be;
	position:fixed;
	font-size:20px;
	left:0px;
	top:10px;
}
#div2 a{
	text-decoration: none;
	color: #28a1be;
}

#div1{
	height:30px;
	width:500px;
	/* background-color:aqua; */
	color:#28a1be;
	position:fixed;
	font-size:20px;
	right:0px;
	top:10px;

}

.title{
	color:#28a1be;
	top:90px;
	position:relative;
}

section{
	/* background-color:aqua; */
	height:80vh;
	width:60%;
	position:relative;
	margin:50px auto;
	
}
.circle{
	height:75vh;
	position:absolute;
	left:18%;
	animation:circle_animation 10s infinite linear;
	
}

@keyframes circle_animation{
	from{transform:rotate(0deg)}
	to{transform:rotate(360deg)}
}

.circle>img{
	
	height:100%;
	width:100%;
}
.face{
	/* background-color:aqua; */
	height:40vh;
	position:absolute;
	/* width:25%; */
	margin:138px auto;
	left:39%;
	
}
.face>img{
	height:100%;
	width:100%;
}
.video-div,.canvas-div{
	height:350px;
	width:350px;
	/* opacity:0.3; */
	left:274px;
	top:120px;
	border-radius:175px;
	position:absolute;
	/* border:1px solid red; */
	/* background-color:red; */
}

video{
	height:350px;
	width:350px;

	position:absolute;
	border-radius:175px;
}
canvas{
	height:350px;
	width:350px;
	border-radius:175px;
}

